<template>
  <div>
    <div @dblclick="editTag" class="bottom-table">
      <el-table :data="tableData" class="custom-table">
        <el-table-column
          v-for="item in columns"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :key="item.prop"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="Settings"
      width="80%"
      draggable
      :close-on-click-modal="false"
    >
      <div style="width: 100%; text-align: right; margin-bottom: 4px">
        <el-button type="primary" size="mini" @click="add">add</el-button>
      </div>
      <el-table :data="dialogData" border style="margin-top: 10px">
        <el-table-column label="label" prop="remark" align="center" width="160">
          <template #default="{ row }">
            <el-input v-model="row.remark" placeholder="please input" />
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in dialogColumns"
          :label="item.remark"
          :key="index"
          align="center"
        >
          <template #header="{ column, $index }">
            <div>
              <span>{{ column.label }}</span>
              <el-icon @click="remove($index)"><Remove color="red" /></el-icon>
            </div>
          </template>
          <template #default="scope">
            <el-select
              v-model="item.external[scope.$index].keyType"
              placeholder="please select"
            >
              <el-option label="tag类型" value="1" />
              <el-option label="tag本身" value="2" />
            </el-select>
            <el-select
              v-model="item.external[scope.$index].key"
              placeholder="please select"
              v-if="item.external[scope.$index].keyType == 1"
            >
              <el-option
                v-for="item in tagTypesList"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
            <el-select
              v-model="item.external[scope.$index].key"
              placeholder="please select"
              v-if="item.external[scope.$index].keyType == 2"
              @change="change(scope.$index)"
            >
              <el-option
                v-for="item in tagsList"
                :key="item.id"
                :label="item.tagName"
                :value="item.tagName"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="changeTag"> Confirm </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { onMounted, reactive, toRefs, watch } from "vue";
import { formatNumber, getNextCode } from "@/utils/common";
export default {
  name: "BottomTable",
  props: ["configJson", "data", "tagsList", "tagTypesList", "isEditting"],
  setup: (props, { emit }) => {
    let state = reactive({
      dialogVisible: false,
      wellData: {},
      form: {},
      espData: [{ remark: "ESP" }],
      columns: [],
      tableData: [],
      dialogColumns: [],
      dialogData: [],
      greyList: [],
    });
    const changeTag = () => {
      state.dialogVisible = false;
      //处理数据格式
      let params = [];
      params.push(state.form);
      emit("updateJson", params.concat(state.dialogColumns));
      dislpayData(state.wellData);
    };
    const change = (index) => {
      console.log(state.dialogColumns, "state.dialogColumns");
      console.log(index, "state.dialogColumns");
    };
    const editTag = () => {
      if (props.isEditting) {
        state.dialogVisible = true;
      }
    };
    const initData = () => {
      state.greyList = [];
      state.greyList = props.configJson.filter(
        (item) =>
          item.type === "jx" && item.external && item.external.length > 0
      );
      let form = props.configJson.filter(
        (item) =>
          item.type === "kgreen" && item.external && item.external.length > 0
      );
      let columns = [];
      let tableData = [];
      if (form.length > 0) {
        state.form = { ...form[0] };
        columns = columns.concat([{ label: "", prop: "t3", width: "140" }]);
        tableData = [
          { t1: "", t2: "", t3: "" },
          { t1: "", t2: "", t3: "" },
          { t1: "Motor Load:", t2: "", t3: "" },
          { t1: "APC", t2: "", t3: "" },
        ];
      }
      if (state.greyList.length > 0) {
        state.dialogColumns = JSON.parse(JSON.stringify(state.greyList || []));
        emit("updateJson", [state.form].concat(state.dialogColumns));
        state.dialogData = state.greyList[0].external || [];
        state.greyList.forEach((t) => {
          columns.push({ label: t.remark, prop: t.id, width: "" });
        });
        tableData[0].t3 = state.dialogData[0].remark;
        tableData[1].t3 = state.dialogData[1].remark;
        tableData[2].t3 = state.dialogData[2].remark;
      }
      state.columns = columns;
      state.tableData = tableData;
    };
    const add = () => {
      const newExternal = JSON.parse(
        JSON.stringify(state.dialogColumns[0].external)
      );
      const newUUid = "uuid" + Math.floor(1000 + Math.random() * 9000);
      const newIndex = newUUid.replace(/^uuid/, "");
      state.dialogColumns.unshift({
        ...state.dialogColumns[0],
        id: newUUid,
        index: Number(newIndex),
        remark: getNextCode(state.dialogColumns[0].remark),
        external: newExternal, // 使用新的 external 数组
      });
      state.greyList.unshift({
        ...state.dialogColumns[0],
        id: newUUid,
        index: Number(newIndex),
        remark: "D",
        external: newExternal, // 使用新的 external 数组
      });
      state.columns.splice(1, 0, {
        label: getNextCode(state.dialogColumns[1].remark),
        prop: newUUid,
        width: "",
      });
    };
    const remove = (number) => {
      state.dialogColumns.splice(number - 1, 1);
    };
    const dislpayData = (data) => {
      state.wellData = { ...data };
      state.tableData.forEach((t, i) => {
        t.t2 = formatNumber(data[state.form.external[0].key]);
        state.dialogColumns.forEach((a, n) => {
          if (i < a.external.length) {
            t[a.id] = formatNumber(data[a.external[i].key]);
          }
        });
      });
    };
    onMounted(() => {
      // initData()
    });
    watch(
      () => props.configJson,
      () => {
        initData();
      },
      { deep: true, immediate: true }
    );
    watch(
      () => props.data,
      (newValue, oldValue) => {
        dislpayData({ ...newValue });
      },
      { deep: true, immediate: true }
    );
    return {
      ...toRefs(state),
      editTag,
      initData,
      changeTag,
      change,
      add,
      remove,
      dislpayData,
    };
  },
};
</script>

<style lang="scss">
.custom-table {
  width: 80%;
  margin-left: 10%;
  margin-bottom: 10px;
  background-color: rgba(0, 0, 0, 0);
  color: #ffffff;
  tr {
    background-color: rgba(0, 0, 0, 0);
    color: #ffffff;
  }
  th.el-table__cell {
    background-color: rgba(0, 0, 0, 0);
    color: #ffffff;
  }
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: rgba(0, 0, 0, 0);
}
.el-table__body tr > td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none;
}
.el-table--fit .el-table__inner-wrapper:before {
  width: 0;
}
.bottom-table {
  width: 80%;
}
</style>
